---
import FontAwesomeIcon from "./FontAwesomeIcon.astro";
import Logo from "./Logo.astro";
import {
  faBook,
  faComments,
  faFileText,
  faHeadset,
  faSearch,
  faX
} from "@fortawesome/free-solid-svg-icons";
import { faGithub } from "@fortawesome/free-brands-svg-icons";
import Search from "astro-pagefind/components/Search";

const githubLink = "https://github.com/ferronweb/ferron";
const chatLink = "https://matrix.to/#/#ferronweb:matrix.org";
const docLinks = Astro.props.docLinks;
---

<header class="sticky top-0 z-50 w-full border-b print:hidden">
  <div
    class="bg-background/95 supports-[backdrop-filter]:bg-background/80 backdrop-blur"
  >
    <div
      class="max-w-384 w-full mx-auto ps-4 pe-2 md:px-8 flex h-15 items-center justify-between"
    >
      <div class="flex-1 flex gap-2">
        <a href="/" class="flex items-center" aria-label="Ferron logo">
          <Logo class="h-6.5 w-auto" />
        </a>
        {
          docLinks ? (
            <div
              class="w-full max-w-96 border transition-colors hover:border-primary hidden lg:flex rounded-lg mx-4 text-sm bg-background text-muted-foreground"
              data-search-bar
            >
              <button
                class="inline-flex justify-center items-center p-0 h-8 w-8 transition-colors shadow-none"
                aria-label="Search"
                aria-controls="search-menu"
                aria-expanded="false"
              >
                <FontAwesomeIcon icon={faSearch} class="w-4 !h-4" />
              </button>
              <div class="grow cursor-text flex items-center px-1 overflow-x-auto whitespace-nowrap">
                <span>Search docs...</span>
              </div>
            </div>
          ) : (
            ""
          )
        }
      </div>
      <div class="items-center justify-end hidden md:flex">
        <nav class="flex items-center space-x-1">
          <a
            href="/#features"
            class="text-sm font-medium transition-colors hover:text-primary px-2 py-2"
          >
            Features
          </a>
          <a
            href="/#install"
            class="text-sm font-medium transition-colors hover:text-primary px-2 py-2"
          >
            Install
          </a>
          <a
            href="/docs"
            class="text-sm font-medium transition-colors hover:text-primary px-2 py-2 flex items-center gap-1"
          >
            <FontAwesomeIcon icon={faBook} class="!h-4 w-4" />
            Docs
          </a>
          <a
            href="/blog"
            class="text-sm font-medium transition-colors hover:text-primary px-2 py-2 flex items-center gap-1"
          >
            <FontAwesomeIcon icon={faFileText} class="!h-4 w-4" />
            Blog
          </a>
          <a
            href="/support"
            class="text-sm font-medium transition-colors hover:text-primary px-2 py-2 flex items-center gap-1"
          >
            <FontAwesomeIcon icon={faHeadset} class="!h-4 w-4" />
            Support
          </a>
          <div class="ml-2 flex items-center gap-1">
            {
              docLinks ? (
                <button
                  class="btn p-0 h-9 w-9 cursor-pointer hover:bg-accent hover:text-accent-foreground shadow-none lg:hidden"
                  aria-label="Search"
                  aria-controls="search-menu"
                  aria-expanded="false"
                  data-search-button
                >
                  <FontAwesomeIcon icon={faSearch} class="w-5 !h-5" />
                </button>
              ) : (
                ""
              )
            }
            <a
              href={githubLink}
              target="_blank"
              rel="noreferrer"
              class="btn p-0 h-9 w-9 cursor-pointer hover:bg-accent hover:text-accent-foreground shadow-none"
              aria-label="GitHub"
            >
              <FontAwesomeIcon icon={faGithub} class="w-5 !h-5" />
            </a>
            <a
              href={chatLink}
              target="_blank"
              rel="noreferrer"
              class="btn p-0 h-9 w-9 cursor-pointer hover:bg-accent hover:text-accent-foreground shadow-none"
              aria-label="Chat"
            >
              <FontAwesomeIcon icon={faComments} class="w-5 !h-5" />
            </a>
          </div>
        </nav>
      </div>
      <nav class="gap-0.5 flex md:hidden">
        {
          docLinks ? (
            <button
              class="inline-flex items-center justify-center rounded-md p-2 text-foreground hover:bg-accent hover:text-accent-foreground focus:outline-none cursor-pointer h-10 w-10 transition-colors"
              aria-label="Search"
              aria-controls="search-menu"
              aria-expanded="false"
              data-mobile-search-button
            >
              <FontAwesomeIcon icon={faSearch} class="w-5 !h-5" />
            </button>
          ) : (
            ""
          )
        }
        <button
          type="button"
          class="inline-flex items-center justify-center rounded-md p-2 text-foreground hover:bg-accent hover:text-accent-foreground focus:outline-none cursor-pointer h-10 w-10 transition-colors"
          aria-controls="mobile-menu"
          aria-expanded="false"
          data-mobile-menu-button
        >
          <span class="sr-only">Open main menu</span>
          <svg
            class="block h-6 w-6"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
            aria-hidden="true"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M4 6h16M4 12h16M4 18h16"></path>
          </svg>
        </button>
      </nav>
    </div>
  </div>
  <div
    class="hidden md:hidden bg-background supports-[backdrop-filter]:bg-background/90 backdrop-blur w-full h-full overflow-auto z-60 fixed top-0 shrink-0 duration-1000"
    data-mobile-menu
  >
    <div class="flex flex-row justify-between px-4 pt-4 md:gap-10">
      <a href="/" class="flex items-center space-x-2" aria-label="Ferron logo">
        <Logo class="h-8 w-auto" />
      </a>
      <button
        type="button"
        class="inline-flex items-center justify-center rounded-md p-2 text-foreground hover:bg-accent hover:text-accent-foreground focus:outline-none transition-colors cursor-pointer"
        aria-controls="close-mobile-menu"
        aria-expanded="false"
        data-mobile-menu-close-button
      >
        <span class="sr-only">Close main menu</span>
        <FontAwesomeIcon icon={faX} class="self-center w-5 !h-5" />
      </button>
    </div>
    <nav class={`${docLinks ? "whitespace-nowrap p-2" : ""} block`}>
      <div
        class={`${docLinks ? "whitespace-nowrap overflow-x-auto flex items-center pb-1" : "space-y-1 px-2 pt-2 pb-1"}`}
      >
        <a
          href="/#features"
          class={`${docLinks ? "inline-block py-1" : "block py-2"} px-3 text-base font-medium hover:bg-accent hover:text-accent-foreground rounded-md`}
        >
          Features
        </a>
        <a
          href="/#install"
          class={`${docLinks ? "inline-block py-1" : "block py-2"} px-3 text-base font-medium hover:bg-accent hover:text-accent-foreground rounded-md`}
        >
          Install
        </a>
        <a
          href="/docs"
          class={`${docLinks ? "inline-block py-1" : "block py-2"} px-3 text-base font-medium hover:bg-accent hover:text-accent-foreground rounded-md`}
        >
          Docs
        </a>
        <a
          href="/blog"
          class={`${docLinks ? "inline-block py-1" : "block py-2"} px-3 text-base font-medium hover:bg-accent hover:text-accent-foreground rounded-md`}
        >
          Blog
        </a>
        <a
          href="/support"
          class={`${docLinks ? "inline-block py-1" : "block py-2"} px-3 text-base font-medium hover:bg-accent hover:text-accent-foreground rounded-md`}
        >
          Support
        </a>
        <div class={`${docLinks ? "inline-flex" : "flex mt-4"} space-x-2 px-3`}>
          <a
            href={githubLink}
            target="_blank"
            rel="noreferrer"
            class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors disabled:pointer-events-none disabled:bg-muted disabled:text-muted-foreground hover:bg-accent hover:text-accent-foreground h-9 w-9"
            aria-label="GitHub"
          >
            <FontAwesomeIcon icon={faGithub} class="w-5 !h-5" />
          </a>
          <a
            href={chatLink}
            target="_blank"
            rel="noreferrer"
            class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors disabled:pointer-events-none disabled:bg-muted disabled:text-muted-foreground hover:bg-accent hover:text-accent-foreground h-9 w-9"
            aria-label="Chat"
          >
            <FontAwesomeIcon icon={faComments} class="w-5 !h-5" />
          </a>
        </div>
      </div>
    </nav>
    {
      docLinks ? (
        <nav>
          <ul class={`flex flex-col mt-3 mx-2 list-none`}>
            {docLinks.map(
              (docLink: {
                href: string;
                target: string;
                sub: boolean;
                label: string;
              }) => (
                <li class="block my-1">
                  {docLink.href ? (
                    <a
                      href={docLink.href}
                      target={docLink.target || "_self"}
                      class={`${docLink.sub ? "ml-4" : ""} block align-middle ${Astro.url.pathname == docLink.href ? "bg-primary text-primary-foreground" : ""} text-inherit px-2 py-0.5 mx-1 rounded-sm hover:bg-accent hover:text-accent-foreground transition-colors`}
                    >
                      {docLink.label}
                    </a>
                  ) : (
                    <span
                      class={`${docLink.sub ? "ml-4" : ""} block align-middle text-inherit px-2 py-0.5 mx-1 rounded-sm font-bold`}
                    >
                      {docLink.label}
                    </span>
                  )}
                </li>
              )
            )}
          </ul>
        </nav>
      ) : (
        ""
      )
    }
  </div>
  {
    docLinks ? (
      <div
        class="hidden bg-background supports-[backdrop-filter]:bg-background/80 backdrop-blur w-full h-full overflow-auto z-70 fixed top-0 shrink-0"
        data-search-menu
      >
        <div class="flex p-4">
          <button
            type="button"
            class="rounded-md ml-auto p-2 text-foreground hover:bg-accent hover:text-accent-foreground focus:outline-none transition-colors cursor-pointer"
            aria-controls="close-search-menu"
            aria-expanded="false"
            data-search-close-button
          >
            <span class="sr-only">Close search menu</span>
            <FontAwesomeIcon icon={faX} class="self-center w-5 !h-5" />
          </button>
        </div>
        <div class="px-4 py-2 md:py-4">
          <Search
            className="max-w-screen-xl mx-auto pagefind-ui"
            uiOptions={{
              showImages: false,
              showSubResults: false,
              resetStyles: false
            }}
          />
        </div>
      </div>
    ) : (
      ""
    )
  }
</header>

<script>
  function initializeHeader() {
    const menuButton = document.querySelector("[data-mobile-menu-button]");
    const menuClose = document.querySelector("[data-mobile-menu-close-button]");
    const menu = document.querySelector("[data-mobile-menu]");
    const menuLinks = document.querySelectorAll("[data-mobile-menu] a");
    if (menuButton) {
      menuButton.addEventListener("click", (e) => {
        e.preventDefault();
        if (menu) {
          menu.classList.remove("hidden");
          document.documentElement.classList.add("max-md:overflow-hidden");
        }
      });
    }
    if (menuClose) {
      menuClose.addEventListener("click", (e) => {
        e.preventDefault();
        if (menu) {
          menu.classList.add("hidden");
          document.documentElement.classList.remove("max-md:overflow-hidden");
        }
      });
    }
    if (menuLinks) {
      menuLinks.forEach((menuLink) => {
        menuLink.addEventListener("click", () => {
          if (menu) {
            menu.classList.add("hidden");
            document.documentElement.classList.remove("max-md:overflow-hidden");
          }
        });
      });
    }

    const searchBar = document.querySelector("[data-search-bar]");
    const searchButton = document.querySelector("[data-search-button]");
    const searchButtonMobile = document.querySelector(
      "[data-mobile-search-button]"
    );
    const searchClose = document.querySelector("[data-search-close-button]");
    const search = document.querySelector("[data-search-menu]");
    if (searchBar) {
      searchBar.addEventListener("click", (e) => {
        e.preventDefault();
        if (search) {
          search.classList.remove("hidden");
          document.documentElement.classList.add("max-md:overflow-hidden");
        }
      });
    }
    if (searchButton) {
      searchButton.addEventListener("click", (e) => {
        e.preventDefault();
        if (search) {
          search.classList.remove("hidden");
          document.documentElement.classList.add("max-md:overflow-hidden");
        }
      });
    }
    if (searchButtonMobile) {
      searchButtonMobile.addEventListener("click", (e) => {
        e.preventDefault();
        if (search) {
          search.classList.remove("hidden");
          document.documentElement.classList.add("max-md:overflow-hidden");
        }
      });
    }
    if (searchClose) {
      searchClose.addEventListener("click", (e) => {
        e.preventDefault();
        if (search) {
          search.classList.add("hidden");
          document.documentElement.classList.remove("max-md:overflow-hidden");
        }
      });
    }
  }

  document.addEventListener("astro:after-swap", initializeHeader);

  initializeHeader();
</script>
